<template>
    <view class="map">
        <view class="map-title center ft-42 t-3 pt-12 pb-12 FZGongYeHei">
            <hj-image src="position-01.svg" width="42rpx" height="42rpx" />
            <text class="ml-6">我们的位置</text>
        </view>
        <view class="map-container over-hide">
            <map class="big" :latitude="map.latitude" :longitude="map.longitude" :markers="[map]">
                <view class="big" @click="seeMap"></view>
            </map>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 地图组件
 * @author yinzhi
 * @date 2025-03-07
 */
import { ref, defineComponent } from 'vue'
import { logger } from '@/utils/log.js'

defineComponent({
    name: 'OurLocation'
})

// 地图经纬度参数
const map = ref({
    latitude: 28.116175,
    longitude: 112.99918,
    id: 1,
    width: 15,
    height: 20,
    callout: {
        content: '湖南省长沙市天心区(湘府路)五凌路195号',
        display: 'ALWAYS',
        padding: 8,
        borderRadius: 4,
        fontSize: 12
    }
})

// 打开内置地图 注意经纬度不能是字符串
const seeMap = () => {
    uni.openLocation({
        latitude: map.value.latitude,
        longitude: map.value.longitude,
        name: '青园小区',
        address: '湖南省长沙市天心区(湘府路)五凌路195号',
        fail: e => {
            logger.error('地图打开失败：', e)
        }
    })
}
</script>

<style scoped lang="scss">
.map-title {
    background: $uni-bg-color;
}
.map-container {
    height: 260rpx;
}
</style>
